<template>
 <div class="menu">
   <el-menu>
      <router-link :to="`/home/space/${username}`" class="el-menu-item" active-class="active">
          <el-icon class="menu-icon">
            <User />
          </el-icon>
          <span>个人中心</span>
      </router-link>
      <router-link :to="`/home/WriterCenter/${username}`" class="el-menu-item" active-class="active">
          <el-icon class="menu-icon">
            <Edit />
          </el-icon>
          <span>创作中心</span>
      </router-link>
      <router-link :to="`/home/message/${username}`" class="el-menu-item" active-class="active">
          <el-icon class="menu-icon">
            <Message />
          </el-icon>
          <span>系统消息</span>
      </router-link>
      <router-link :to="`/home/setting/${username}`" class="el-menu-item" active-class="active">
          <el-icon class="menu-icon">
            <Setting />
          </el-icon>
          <span>个人设置</span>
      </router-link>
      <router-link :to="`/home/admin/${username}`" class="el-menu-item" active-class="active" v-if="isManager">
          <el-icon class="menu-icon">
            <Tools />
          </el-icon>
          <span>管理员</span>
      </router-link>
      <router-link to="/" class="el-menu-item" active-class="active">
          <el-icon class="menu-icon">
            <HomeFilled />
          </el-icon>
          <span>返回主页</span>
      </router-link>
   </el-menu>
 </div>
</template>

<script setup>

import { ref, defineProps,getCurrentInstance, onMounted } from 'vue';
import { User,Edit,Message,Setting,Tools,HomeFilled} from '@element-plus/icons-vue';

const {proxy}=getCurrentInstance()
const props = defineProps({
  username:Number
});

const username = ref(props.username);
const isManager=ref(false)
onMounted(async()=>{
  console.log('测试测试测试测试测试测试')
   await proxy.$http.post('/if_manager/').then(
    (response)=>{
      console.log(response.data)
        if(response.data.message==="是管理员"){
            isManager.value=true
        }else{
            isManager.value=false
        }
    }
   ).catch(err=>{
     console.log(err)
   })
})
</script>

<style scoped>
.menu {
  width: 100%;
}

.el-menu-item {
  display: flex;
  align-items: center;
}

.el-menu-item .menu-icon {
  font-size: 20px;
  margin-right: 8px;
}

.el-menu-item span {
  font-size: 16px;
}

.active {
  background: linear-gradient(to right, rgb(249, 226, 230), rgba(255, 255, 255, 0.902));
}
</style>